<template>
    <div class="layout">
      <Header />
      <div class="container">
        <div class="table-container">
          <div class="info">
            <div class="table-name">
              <span style="float: right"
                ><el-button size="small" type="primary" @click="handleAdd"
                  >添加模板</el-button
                ></span
              >
            </div>
            <el-config-provider :locale="zhCn">
              <el-table
                :data="mapStore.templateTableData"
                border
                style="width: 100%"
                :row-style="tableRowStyle"
              >
                <el-table-column prop="appid" label="ID" width="100"/>
                <el-table-column prop="code" label="表单名称" />
                <el-table-column label="操作" width="200">
                  <template #default="scope">
                    <el-button
                      size="small"
                      type="text"
                      @click="handlePreview(scope,)"
                      >预览</el-button
                    >
                    <el-button
                      size="small"
                      type="text"
                      @click="handleEdit(scope)"
                      >编辑</el-button
                    >
                    <el-button
                      size="small"
                      type="text"
                      @click="handleDelete(scope)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
  
              <div class="space-15"></div>
  
              <el-pagination
                size="small"
                background
                layout="total, sizes, prev, pager, next"
                :current-page="mapStore.templateTableCurrentPage"
                :page-size="mapStore.templateTablePageSize"
                :page-sizes="[5, 10]"
                :total="mapStore.templateTableTotal"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </el-config-provider>
          </div>
        </div>
      </div>
    </div>

    <DialogForAdd ref="childOfDialogForAdd"/>
    <DialogForEdit ref="childOfDialogForEdit"/>
    <DialogForPreview ref="childOfDialogForPreview" />
  </template>
  
  <script setup>
  import { ref, onMounted } from "vue";
  import zhCn from "element-plus/es/locale/lang/zh-cn";
  import { ElMessage, ElMessageBox } from "element-plus";
  import axios from "axios";
  import {useRouter} from "vue-router"
  import Header from "@/components/Header.vue";
  import DialogForAdd from "@/components/DialogForAdd.vue";
  import DialogForEdit from "@/components/DialogForEdit.vue";
  import DialogForPreview from "@/components/DialogForPreview.vue";
  import { fetchTemplateData, handleAjaxDelete } from "@/api/get-data.js";
  import pinia from "@/store/pinia";
  import { useMapStore } from "@/store/map";
  const mapStore = useMapStore(pinia);

  const router = useRouter();
  const childOfDialogForAdd = ref(null);
  const childOfDialogForEdit = ref(null);
  const childOfDialogForPreview = ref(null);
  
  // 分页大小改变时的回调
  const handleSizeChange = (val) => {
    mapStore.templateTablePageSize = val;
    fetchTemplateData(
      mapStore.templateTableCurrentPage,
      mapStore.templateTablePageSize
    );
  };
  
  // 当前页改变时的回调
  const handleCurrentChange = (val) => {
    mapStore.templateTableCurrentPage = val;
    fetchTemplateData(
      mapStore.templateTableCurrentPage,
      mapStore.templateTablePageSize
    );
  };
  
  const tableRowStyle = (row) => {
    return row.rowIndex % 2 === 0
      ? { background: "rgba(14, 95, 255, 0.05)", cursor: "pointer" }
      : { background: "rgba(14, 95, 255, 0.15)", cursor: "pointer" };
  };
  
  const handleAdd = () => {
    // router.push("/add");
    childOfDialogForAdd.value.dialogVisible = true;
  };
  
  const handlePreview = (scope) => {
    childOfDialogForPreview.value.dialogVisible = true;
  };
  
  const handleEdit = (scope) => {
    // router.push("/edit");
    childOfDialogForEdit.value.dialogVisible = true;
  };

  const handleDelete = () => {
    console.log("handleDelete");
  }
  
  onMounted(() => {
    fetchTemplateData(
      mapStore.templateTableCurrentPage,
      mapStore.templateTablePageSize
    );
  });
  </script>
  
  <style scoped>
  .container {
    width: 1440px;
    margin: 0 auto;
    padding: 10px;
    height: 100%;
  }
  
  .table-container {
    width: 100%;
    height: 100%;
    overflow-x: auto;
  }
  
  .table-name {
    height: 50px;
    line-height: 40px;
    padding-left: 15px;
    background: url("./assets/images/holder.png") no-repeat scroll left center;
    background-size: cover;
    color: #fff;
    font-size: 20px;
  }
  
  .el-table {
    /* --el-table-border-color: transparent;
    --el-table-border: none; */
    /* --el-table-border: 1px solid rgba(19, 84, 134, 0.25); */
    --el-table-border-color: rgba(11, 53, 109, 0.25);
    --el-table-border: 1px solid rgba(11, 53, 109, 0.25);
    --el-table-text-color: #bdbdbe;
    --el-table-header-text-color: #bdbdbe;
    /* --el-table-row-hover-bg-color: transparent; */
    --el-table-row-hover-bg-color: rgba(14, 95, 255, 0.25);
    /* --el-table-current-row-bg-color: transparent; */
    --el-table-current-row-bg-color: rgba(19, 84, 134, 0.5);
    /* --el-table-header-bg-color: transparent; */
    --el-table-header-bg-color: rgba(19, 84, 134, 0.5);
    /* --el-table-bg-color: transparent; */
    --el-table-bg-color: rgba(19, 84, 134, 0.25);
    /* --el-table-tr-bg-color: transparent; */
    --el-table-tr-bg-color: rgba(19, 84, 134, 0.25);
    --el-table-expanded-cell-bg-color: transparent;
  }
  
  .table-container /deep/ .el-table__header thead th {
    font-weight: bold !important;
  }
  </style>
  